<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    *{
        padding:0px;
        margin:0px;
        font-family:"微软雅黑";
    }
    #header{
        height:100px;
        border:solid 1px red;
        margin:0px auto;
    }
    #main{
        margin:10px auto;
        height:400px;
    }
    #footer{
        margin:0px auto;
        height:100px;
        border:solid 1px red;
    }

    @media screen and (max-width:600px){
    #header,#footer
    {
        width:300px;
    }

    #main
    {
        width:300px;
        height:400px;
    }

    #main-left
    {
        display:none; /*隐藏内容左边*/
    }

    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }

    #main-right

    {

        display:none;  /*隐藏内容右边*/

    }

}
    </style>
  </head>
  <body>

  <div id="header">头部</div>

  <div id="main">

     <div id="main-left">内容-左边</div>

     <div id="main-center">内容-中间</div>

     <div id="main-right">内容-右边</div>

  </div>

  <div id="footer">底部</div>

</body>
</html>
